<template>
  <div class="home" @click.stop="isframe" style="height: 100%;position: relative;">
    <div class="nav">
      <div class="nav_left">
        <ul>
          <li @click="goIndex(1)">工程管家</li>
          <li style="display: none;">{{flags}}</li>
          <li v-for="(item,index) in menuList" :key="index" :class="flag==index?'active':''" @click="tabs(index)">
            {{item.authName}}
            <ul class="secondMenu" v-if="flag == index">
              <div  v-for="(items,indexs) in item.children" :key="indexs">
                <!--<li v-if="items.authPath != null" class="second">
                  <router-link :to="'/'+items.authPath">{{items.authName}}</router-link>
                </li>-->
                <li :class="(items.authPath == null||items.authPath == '') ? 'first' : 'second'">
                  <span v-if="items.authPath == null||items.authPath == ''">{{items.authName}}</span>
                  <router-link v-else :to="'/'+items.authPath">{{items.authName}}</router-link>
                </li>
              </div>
            </ul>
          </li>

        </ul>
      </div>
      <div class="nav_right">
        <ul>
          <li @click.stop="accountShow">
            <span class="iconfont" style="font-size:15px" title="账户设置">
              <a>&#xe611;</a>
              {{username}}
            </span>
            <i></i>
          </li>
          <li @click.stop="codeShows">
            <span class="iconfont" style="font-size:15px" title="扫描二维码下载">
              <a style="font-size: 21px;">&#xe7c1;</a>
            </span>
            <i></i>
          </li>
          <li @click="goIndex(1)">
            <span class="iconfont" style="font-size:25px" title="首页">&#xe688;</span>
            <i></i>
          </li>
          <li @click.stop="msgShow">
            <span class="iconfont msgs" style="font-size:25px" title="系统消息">
              &#xe667;
              <b v-if="totalCount!=0">{{totalCount}}</b>
            </span>
            <i></i>
          </li>
          <li @click.stop="open2">
            <span class="iconfont" style="font-size:25px" title="退出登录">&#xe652;</span>
          </li>
        </ul>
      </div>
    </div>

    <el-main style="margin-left: 180px;padding: 50px 0 100px;min-height:100vh;">
      <!--<keep-alive>-->
      <!--<router-view></router-view>-->
      <!--</keep-alive>-->
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </el-main>

    <!-- </el-container> -->

    <!--admin弹框-->
    <div class="admin" v-if="account">
      <div class="account">
        <span>账户信息</span>
        <span>
          <router-link to="/setting">账户设置</router-link>
        </span>
      </div>
      <ul>
        <li>
          所在部门：
          <span>{{accountMsg.orgName}}</span>
        </li>
        <li>
          所属角色：
          <span>{{accountMsg.roleName}}</span>
        </li>
        <li>
          职能描述：
          <span>{{accountMsg.roleDesc}}</span>
        </li>
        <li>
          本次登录：
          <span>{{accountMsg.lastLoginDate | dateFilter}}</span>
        </li>
        <li>
          登录地区：
          <span>{{accountMsg.region}}{{accountMsg.city}}{{accountMsg.isp}}</span>
          <span>({{accountMsg.lastLoginIp}})</span>
        </li>
        <li>
          上次登录：
          <span>{{accountMsg.sLoginDate}}</span>
        </li>
      </ul>
    </div>

    <!--二维码弹框-->
    <div class="code" v-if="codeShow">
      <img src="/static/index/download.png" style="width: 150px;margin-top: 20px;"/>
      <div>扫描二维码下载APP</div>
    </div>

    <!--menu弹框-->
    <div class="menu" v-if="menu">
      <div class="account">
        <span>常用菜单</span>
        <span>
          <router-link to="#">菜单管理</router-link>
        </span>
      </div>
      <ul>
        <li>
          <router-link to="#">商品列表</router-link>
        </li>
        <li>
          <router-link to="#">添加商品</router-link>
        </li>
        <li>
          <router-link to="#">订单列表</router-link>
        </li>
        <li>
          <router-link to="#">用户管理</router-link>
        </li>
        <li>
          <router-link to="#">交易统计</router-link>
        </li>
        <li>
          <router-link to="#">广告管理</router-link>
        </li>
        <li>
          <router-link to="#">专题列表</router-link>
        </li>
        <li>
          <router-link to="#">部门管理</router-link>
        </li>
        <li>
          <router-link to="#">成员管理</router-link>
        </li>
      </ul>
    </div>

    <!--消息提示弹框-->
    <div class="msg" v-if="msg">
      <ul class="list">
        <li>消息提示</li>
        <!--需后台修改（将待入库甲供材料跟待入库施工队退料合并）-->
        <li
          @click="$router.push({name:'unSureInStore'})"
          v-if="accountInfo.hasOwnProperty('armorForMaterialListCount') && accountInfo.armorForMaterialListCount>0"
        >
          <span style="float:left;">待确认入库</span>
          <span style="float:right">（{{accountInfo.armorForMaterialListCount}}）</span>
        </li>
        <li
          v-if="accountInfo.hasOwnProperty('waitCloseWorkTeamComCount') && accountInfo.waitCloseWorkTeamComCount>0"
          @click="$router.push({name:'unPayCompany'})"
        >
          <span style="float:left;">待结算施工公司</span>
          <span style="float:right">（{{accountInfo.waitCloseWorkTeamComCount}}）</span>
        </li>
        <li
          v-if="accountInfo.hasOwnProperty('toBeConfirmedInStoreCounts') && accountInfo.toBeConfirmedInStoreCounts>0"
          @click="$router.push({name:'unMaterSureIn'})"
        >
          <span style="float:left;">待确认入库</span>
          <span style="float:right">（{{accountInfo.toBeConfirmedInStoreCounts}}）</span>
        </li>
        <li
          v-if="accountInfo.hasOwnProperty('matWarning') && accountInfo.matWarning>0"
          @click="$router.push({name:'unNeedMater'})"
        >
          <span style="float:left;">需领取材料</span>
          <span style="float:right">（{{accountInfo.matWarning}}）</span>
        </li>
        <li
          v-if="accountInfo.hasOwnProperty('projectCount') && ms_roleName=='AreaManager' && accountInfo.projectCount>0"
          @click="$router.push({name:'bigAreaUnAcceptance'})"
        >
          <span style="float:left;">待验收项目</span>
          <span style="float:right">（{{accountInfo.projectCount}}）</span>
        </li>

        <li
          v-if="accountInfo.hasOwnProperty('bmkxmdys') && ms_roleName=='ProjectClerk' && accountInfo.bmkxmdys>0"
          @click="$router.push({name:'bmkUnAcceptance'})"
        >
          <span style="float:left;">待验收项目(补盲扩)</span>
          <span style="float:right">（{{accountInfo.bmkxmdys}}）</span>
        </li>

        <li
          v-if="accountInfo.hasOwnProperty('frozenStoreListRowCounts') && accountInfo.frozenStoreListRowCounts>0"
          @click="$router.push({name:'unMaterSureMater'})"
        >
          <span style="float:left;">待确认材料</span>
          <span style="float:right">（{{accountInfo.frozenStoreListRowCounts}}）</span>
        </li>
        <li
          v-if="(ms_roleName == 'ProjectManager' || ms_roleName == 'CenterClerk' || ms_roleName == 'CenterDeputy' || ms_roleName == 'CenterBOSS' || ms_roleName == 'WorkTeamLeader') && accountInfo.projectAddCount>0"
          @click="$router.push({name:'unProject'})"
        >
          <span style="float:left;">待建项项目</span>
          <span style="float:right">（{{accountInfo.projectAddCount}}）</span>
        </li>
        <!--待建项项目 (非项目部文员)      待建项项目 (项目部文员)-->
        <!-- <li v-if="ms_roleName == 'ProjectClerk' && accountInfo.projectAddCount>0" @click="$router.push({name:'unTakePro'})">
          <span style="float:left;">待建项项目</span>
          <span style="float:right">（{{accountInfo.projectAddCount}}）</span>
        </li> -->
        <li
          v-if="accountInfo.hasOwnProperty('Contract') && accountInfo.Contract>0"
          @click="$router.push({name:'unContract'})"
        >
          <span style="float:left;">待收款合同</span>
          <span style="float:right">（{{accountInfo.Contract}}）</span>
        </li>

        <!-- 缺一个 待开票  财务 -->
        <li
          v-if="accountInfo.hasOwnProperty('cwdkp') && accountInfo.cwdkp>0"
          @click="$router.push({name:'makeContract'})"
        >
          <span style="float:left;">待开票合同</span>
          <span style="float:right">（{{accountInfo.cwdkp}}）</span>
        </li>

        <!--(管理部/boss)-->
        <li
          v-if="accountInfo.hasOwnProperty('AuditTask') && accountInfo.AuditTask>0"
          @click="$router.push({name:'projects'})"
        >
          <span style="float:left;">待审核项目</span>
          <span style="float:right">（{{accountInfo.AuditTask}}）</span>
        </li>
        <li
          v-if="accountInfo.hasOwnProperty('selectWaitProInvoiceAmount') && accountInfo.selectWaitProInvoiceAmount>0"
          @click="$router.push({name:'unContract'})"
        >
          <span style="float:left;">待开票收款合同</span>
          <span style="float:right">（{{accountInfo.selectWaitProInvoiceAmount}}）</span>
        </li>
        <li
          v-if="accountInfo.hasOwnProperty('waitPayCount') && accountInfo.waitPayCount>0"
          @click="$router.push({name:'unPayTeam'})"
        >
          <span style="float:left;">待结算施工队</span>
          <span style="float:right">（{{accountInfo.waitPayCount}}）</span>
        </li>
        <li
          v-if="accountInfo.hasOwnProperty('projectCount') && ms_roleName!='AreaManager' && accountInfo.projectCount>0"
          @click="$router.push({name:'unAcceptance'})"
        >
          <span style="float:left;">待验收项目</span>
          <span style="float:right">（{{accountInfo.projectCount}}）</span>
        </li>
        <li
          v-if="accountInfo.hasOwnProperty('sendOrdersCount') && accountInfo.sendOrdersCount>0"
          @click="$router.push({name:'unTakeOrder'})"
        >
          <span style="float:left;">待处理派单</span>
          <span style="float:right">（{{accountInfo.sendOrdersCount}}）</span>
        </li>
        <li
          v-if="accountInfo.hasOwnProperty('checkListCount') && ms_roleName == 'ProjectWarehouse' && accountInfo.checkListCount>0"
          @click="$router.push({name:'pending'})"
        >
          <span style="float:left;">待处理材料</span>
          <span style="float:right">（{{accountInfo.checkListCount}}）</span>
        </li>
        <li
          v-if="accountInfo.hasOwnProperty('checkListCount') && ms_roleName == 'ProjectManager' && accountInfo.checkListCount>0"
          @click="$router.push({name:'material'})"
        >
          <span style="float:left">待审批采购</span>
          <span style="float:right">（{{accountInfo.checkListCount}}）</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import { log } from "util";
  export default {
    name: "home",
    data() {
      return {
        ms_roleName:localStorage.getItem("roleName"),
        activeIndex: "1",
        name: "xinxi",
        flag: 0,
        minHeight: 0, //最小高度
        account: false, //账户信息弹框
        menu: false, //菜单弹框
        msg: false, //消息提示弹框
        info: null,
        menuList:JSON.parse(localStorage.getItem("ms_limit")),
        accountInfo:{},
        accountMsg:{},
        totalCount:0,//消息总条数
        websock: null,
        codeShow:false,//是否显示二维码
      };
    },
    computed: {
      username() {
        let username = localStorage.getItem("ms_username");
        return username ? username : this.name;
      },
      flags() {

        let flags = localStorage.getItem("flags");
        this.flag = flags;
      },
    },
    created() {
      if (!localStorage.getItem("flags")) {
        this.tabs(0);
      }
      //页面刚进入时开启长连接
      this.initWebSocket()
    },
    mounted(){
      this.undoList();
//      this.ipConfig();
    },
    methods: {
      //显示二维码
      codeShows(){
        this.menu = false;
        this.msg = false;
        this.account = false;
        this.codeShow = !this.codeShow;
      },
      //待处理事项
      undoList(){
        let that = this;
        that.totalCount = 0;
        let suCb = function(res){
          that.accountInfo = res.data.data;
          for (var key in that.accountInfo){
            that.totalCount += that.accountInfo[key];
          }
          console.log("消息总数为："+that.totalCount)
          console.log(res.data)
        }
        let erCb = function(res){
          console.log(res)
        }
        let postData = {
        }
        let palyParam = {
          url: "/api/web/indexPage/getIndexPageResult",
          methods:'post',
          data: postData,
          success: suCb,
          error: erCb,
        }
        that.$https(palyParam)
      },
      //切换tabs
      tabs(index) {
        this.flag = index;
        localStorage.setItem("flags", index);
//      console.log(index);
      },
      // 退出登录
      open2() {
        this.$confirm("确定要退出登录吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            localStorage.clear();
            /*localStorage.removeItem("ms_username");
            localStorage.removeItem("ms_limit");
            localStorage.removeItem("ms_userId");
            localStorage.removeItem("roleName");*/
            this.$router.push("/index");
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
      },
      //账户信息
      accountShow: function() {
        this.menu = false;
        this.msg = false;
        this.codeShow = false;
        if (this.account == true) {
          this.account = false;
        } else {
          this.account = true;
        }
        this.accountFn();
      },
      //菜单弹框
      menuShow: function() {
        this.account = false;
        this.codeShow = false;
        this.msg = false;
        if (this.menu == true) {
          this.menu = false;
        } else {
          this.menu = true;
        }
      },
      //消息弹框
      msgShow: function() {
        this.account = false;
        this.menu = false;
        this.codeShow = false;
        if (this.msg == true) {
          this.msg = false;
        } else {
          this.msg = true;
        }
      },
      //点击空白地方弹框消失
      isframe: function() {
        this.account = false;
        this.menu = false;
        this.msg = false;
        this.codeShow = false;
      },
      goIndex(k){
        if(k == 1){
          this.flag = 0;
          this.$router.push({name:'system'});
        }
      },
      //账户信息显示函数
      accountFn(){
        let that = this;
        let suCb = function(res){
          that.accountMsg = res.data.data;
          console.log(res.data)
        }
        let erCb = function(res){
          console.log(res)
        }
        let postData = {
        }
        let palyParam = {
          url: "/api/web/sysUser/getLoginInfo",
          methods:'post',
          data: postData,
          success: suCb,
          error: erCb,
        }
        that.$https(palyParam)
      },
      ipConfig(){
        this.$axios.get('/apis/service/getIpInfo.php', { params: {ip:'47.106.35.90'} }).then((res) => {
          console.log(res)
          console.log("您所在的城市："+res.data.data.region,res.data.data.city)
        }).catch(res => {
          // this.$message.error("网络异常，请稍后再试！")
        })
      },
      //点击消息框跳转到消息详情页
      loops(val){
        this.$router.push({name:val});
      },
      //websock
      initWebSocket(){ //初始化weosocket
//        this.websock = new WebSocket(`ws://192.168.0.133:6070/api/web/websocket/${localStorage.getItem('token')}`);
        this.websock = new WebSocket(`wss://47.106.35.90:8081/api/web/websocket/${localStorage.getItem('token')}`);
        this.websock.onopen = this.websocketonopen;
        this.websock.onerror = this.websocketonerror;
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onclose = this.websocketclose;
      },
      websocketonopen() {
        console.log("WebSocket连接成功");
      },
      websocketonerror(e) { //错误
        console.log("WebSocket连接发生错误");
      },
      websocketonmessage(e){ //数据接收
        console.log(e,"数据接收");
//        const redata = JSON.parse(e.data);
        this.undoList();
        //注意：长连接我们是后台直接1秒推送一条数据，
        //但是点击某个列表时，会发送给后台一个标识，后台根据此标识返回相对应的数据，
        //这个时候数据就只能从一个出口出，所以让后台加了一个键，例如键为1时，是每隔1秒推送的数据，为2时是发送标识后再推送的数据，以作区分

      },
      websocketsend(agentData){//数据发送
        this.websock.send(agentData,"数据发送");
//        this.websock.send(JSON.stringify(agentData))
      },
      websocketclose(e){ //关闭
        console.log("关闭发送token")
        this.websock.send(localStorage.getItem('token')+'|TOKEN');
        console.log("connection closed (" + e.code + ")");
      },
    }
  };
</script>
<style  scoped>
  .nav {
    width: 100%;
    min-width: 1300px;
    position: fixed;
    background: #595e6d;
    top:0;
    left: 0;
    z-index: 999;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .nav_right ul {
    overflow: hidden;
  }
  .nav_left ul li:first-of-type {
    font-size: 16px;
    font-weight: bold;
  }
  .nav_left>ul>li>ul{
    cursor: default;
  }

  .nav_left li,
  .nav_right li {
    color: #fff;
    float: left;
    padding: 0 15px;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    box-sizing: border-box;
    cursor: pointer;
  }
  .nav_right ul {
    padding-right: 20px;
  }
  .nav_right ul li i {
    padding-left: 25px;
    border-right: 1px solid #474b56;
  }
  .nav_right ul li .msgs {
    position: relative;
  }
  .nav_right ul li .msgs b {
    position: absolute;
    display: block;
    width: 22px;
    height: 22px;
    top: -12px;
    left: 10px;
    line-height: 22px;
    text-align: center;
    font-size: 10px;
    border-radius: 50%;
    background: #ff5918;
    font-weight: normal;
  }
  .nav_right ul li:last-of-type {
    border: none;
  }
  .nav i {
    vertical-align: middle;
  }
  .iconfont a {
    font-size: 25px;
    font-style: normal;
    vertical-align: middle;
  }
  a,
  ul,
  li {
    text-decoration: none;
    list-style: none;
  }
  /* 侧边栏样式 */

  .secondMenu {
    position: absolute;
    left: 0;
    top: 50px;
    height: 110vh;
    background: #eaedf1;
    width: 180px;
    overflow-y: auto;
    padding-bottom: 140px;
    box-sizing: border-box;
  }

  .nav_left .secondMenu .first {
    background: #f2f2f2;
    color: #999;
    text-align: left;
    padding-left: 40px;
    font-size: 15px;
    font-weight: 500;
    cursor: default;
  }

  .secondMenu li {
    float: none !important;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    box-sizing: border-box;
    padding: 0;
  }
  .secondMenu ul {
    width: 100%;
  }

  .second a {
    color: #666;
    display: block;
    text-align: left;
    padding-left: 40px;
    width: 100%;
    font-size: 14px;
    font-weight: normal;
  }
  .nav_left .secondMenu .second a:hover {
    color: #1abc9c;
  }
  .active {
    background: #828690;
  }
  /* 路由高亮 */
  .router-link-active {
    color: #48c9b0 !important;
    border-top: 1px solid #e4e4e4;
    background: #fff;
  }

  /*弹框样式*/
  /*账户弹框*/
  .admin,
  .menu,
  .code,
  .msg {
    width: 420px;
    position: absolute;
    right: 0;
    top: 50px;
    color: #999;
    padding: 10px 20px 20px 20px;
    font-size: 12px;
    box-sizing: border-box;
    border: 1px solid #eaeaea;
    background: #fff;
    z-index: 99;
  }
  .code div{
    padding: 10px 0;
    color: #1abc9a;
  }
  .admin .account,
  .menu .account {
    width: 100%;
    display: flex;
    flex-direction: row;
    padding: 0 10px 10px 10px;
    border-bottom: 1px solid #eaeaea;
  }
  .admin .account span,
  .menu .account span {
    width: 100%;
    text-align: left;
  }
  .admin .account span:last-of-type,
  .menu .account span:last-of-type {
    text-align: right;
  }
  .admin .account span:last-of-type a,
  .menu .account span:last-of-type a {
    color: #1bbd9d;
  }
  .admin ul {
    padding-left: 20px;
    text-align: left;
  }
  .admin ul li {
    margin-top: 20px;
  }
  .admin ul li span {
    color: #666;
  }
  /*菜单弹框*/
  .menu ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 10px;
  }
  .menu ul li {
    width: 33%;
    text-align: center;
    padding: 10px 0;
  }
  .menu ul li a {
    color: #666;
  }
  .menu ul li a:hover {
    color: #1abc9c;
  }

  .msg ul li {
    color: #666;
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #dadada;
    padding: 15px 5px 10px 5px;
    text-align: left;
  }
  .msg ul li:first-of-type {
    color: #999;
  }
  .msg ul li:last-of-type {
    border: none;
  }
  .msg ul:last-of-type {
    margin-top: 10px;
  }
  .msg ul li span {
    width: 100%;
  }
  .msg ul li span:first-of-type:hover {
    color: #1abc9c;
    cursor: pointer;
  }
  .msg ul li span:last-of-type {
    text-align: right;
    color: red;
  }
</style>



